<template>
	<view class="flex-column-view page-view">
		<view class="card">
			<view class="title-row">
				<view class="title">收益概览</view>
				<view class="tag">
					<image src="/src/static/mine/receiveRecord/protect.png" mode="aspectFill"></image>
					<text>安全保障中</text>
				</view>
			</view>
			<view class="label-row">已获得收益(元)</view>
			<view class="value-row">1341.83</view>
			<view class="data-card">
				<view class="col">
					<view class="label">分享游览收益</view>
					<view class="value">1341.83</view>
				</view>
				<nut-divider direction="vertical" />
				<view class="col">
					<view class="label">分享购买收益</view>
					<view class="value">1341.83</view>
				</view>
			</view>
		</view>
		<view class="list-view">
			<scroll-view 
				style="height: 100%;" 
				:scroll-y="true" 
				lower-threshold="50"
				:refresher-enabled="true"
				:refresher-triggered="triggered"
				@refresherrefresh="onRefresh"
				@scrolltolower="onToLower" 
			>
				<view class="item">
					<view class="icon-box red_packet">
						<image class="icon" src="https://free.picui.cn/free/2025/10/14/68ee6f9fd73d8.png" mode="aspectFill"></image>
					</view>
					<view class="center-box">
						<view>
							<text class="label">好友预览</text>
							<text class="desc">(微信用户0123)</text>
						</view>
						<view class="time">2025-9-2 14:13</view>
					</view>
					<view class="right-box">
						<view class="value">+0.35</view>
						<view class="label">收益情况</view>
					</view>
				</view>
				<view class="item">
					<view class="icon-box invite_step">
						<image class="icon" src="https://free.picui.cn/free/2025/10/14/68ee6f9fc35de.png" mode="aspectFill"></image>
					</view>
					<view class="center-box">
						<view>
							<text class="label">好友购买</text>
							<text class="desc">(微信用户0123)</text>
						</view>
						<view class="time">2025-9-2 14:13</view>
					</view>
					<view class="right-box">
						<view class="value">+30.00</view>
						<view class="label">收益情况</view>
					</view>
				</view>
				<view class="item">
					<view class="icon-box tk_teacher">
						<image class="icon" src="https://free.picui.cn/free/2025/10/14/68ee6f9fd8c20.png" mode="aspectFill"></image>
					</view>
					<view class="center-box">
						<view>
							<text class="label">拓客激励</text>
							<text class="desc">(微信用户0123)</text>
						</view>
						<view class="time">2025-9-2 14:13</view>
					</view>
					<view class="right-box">
						<view class="value">+20.00</view>
						<view class="label">收益情况</view>
					</view>
				</view>
				<view class="item">
					<view class="icon-box invite_fixed">
						<image class="icon" src="https://free.picui.cn/free/2025/10/14/68ee6f9fc3cfc.png" mode="aspectFill"></image>
					</view>
					<view class="center-box">
						<view>
							<text class="label">免单好礼</text>
							<text class="desc">(微信用户0123)</text>
						</view>
						<view class="time">2025-9-2 14:13</view>
					</view>
					<view class="right-box">
						<view class="value">+299.00</view>
						<view class="label">收益情况</view>
					</view>
				</view> 
				<view class="nothing">
					没有更多了
				</view>
				<!-- <Empty v-if="!dataList.length && !loading" /> -->
				<view class="safe-area-bottom"></view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import Empty from '@/components/Empty/index.vue'

const searchForm = reactive({
	page: 1,
	page_size: 10
})
const loading = ref(false)

const triggered = ref(false)

const dataList = ref([])

const lastPage = ref(0)

const getList = async () => {
	loading.value = true
	uni.showLoading({
		title: '加载中',
		mask: true
	});
	setTimeout(() => {
		loading.value = false
		uni.hideLoading()
		triggered.value = false
	}, 200)
	// const res = await getOrders('luck', searchForm)
	// loading.value = false
	// uni.hideLoading()
	// if (triggered.value) {
	// 	triggered.value = false
	// }
	// dataList.value = [...(searchForm.page === 1 ? [] : dataList.value), ...res.data]
	// lastPage.value = res.meta.last_page
}

const onToLower = () => {
	if (searchForm.page < lastPage.value) {
		searchForm.page++
		getList()
	}
}

const onRefresh = () => {
	triggered.value = true
	searchForm.page = 1
	getList()
}

onMounted(() => {
  getList()
})
</script>

<style>
	page {
		background: linear-gradient(180deg, #E8DEFF 0%, #F3F5F9 100%);
	}
</style>

<style lang="scss" scoped>
.page-view {
	padding: 30rpx 30rpx 0;
}
.card {
	overflow: hidden;
	padding: 10rpx;
	margin-bottom: 20rpx;
	border-radius: 20rpx;
	background-color: #4E2FDC;
	.title-row {
		margin: 20rpx 34rpx 26rpx;
		display: flex;
		align-items: center;
		gap: 18rpx;
		.title {
			font-size: 36rpx;
			font-weight: 700;
			color: #fff;
		}
		.tag {
			height: 50rpx;
			padding: 0 18rpx;
			display: flex;
			align-items: center;
			gap: 12rpx;
			border-radius: 50rpx;
			background-color: #4127b7;
			image {
				width: 20rpx;
				height: 24rpx;
				margin-top: 4rpx;
			}
			text {
				font-size: 24rpx;
				color: #C1B9E3;
			}
		}
	}
	.label-row {
		font-size: 28rpx;
		color: #fff;
		margin: 0 34rpx 10rpx;
	}
	.value-row {
		font-size: 28rpx;
		font-weight: 700;
		color: #fff;
		margin: 0 34rpx 26rpx;
	}
	.data-card {
		overflow: hidden;
		display: flex;
		align-items: center;
		border-radius: 20rpx;
		background-color: #EEEBFC;
		.col {
			flex: 1;
			padding: 32rpx;
			text-align: center;
			.label {
				font-size: 28rpx;
				color: #8F92BD;
				margin-bottom: 16rpx;
			}
			.value {
				font-size: 28rpx;
				font-weight: 700;
			}
		}
		:deep(.nut-divider) {
			height: 100rpx;
			border-color: #E7E5F6;
		}
	}
}
.list-view {
	flex: 1;
	overflow-y: auto;
	position: relative;
	.item {
		overflow: hidden;
		display: flex;
		align-items: center;
		padding: 28rpx 18rpx;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		background-color: #fff;
		.icon-box {
			width: 100rpx;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 10rpx;
			margin-right: 18rpx;
			.icon {
				width: 54rpx;
				height: 54rpx;
			}
		}
		.red_packet {
			background-color: #BFDDFF;
		}
		.invite_step {
			background-color: #E6DBFF;
		}
		.tk_teacher {
			background-color: #FFD5CC;
		}
		.invite_fixed {
			background-color: #bcf3e5;
		}
		.center-box {
			flex: 1;
			margin-right: 30rpx;
			.label {
				font-size: 28rpx;
				font-weight: 700;
			}
			.desc {
				font-size: 28rpx;
				color: #9E9E9E;
			}
			.time {
				font-size: 24rpx;
				color: #797979;
				margin-top: 20rpx;
			}
		}
		.right-box {
			text-align: right;
			margin-right: 16rpx;
			.value {
				font-size: 28rpx;
				font-weight: 700;
				color: #FF5959;
			}
			.label {
				font-size: 24rpx;
				color: #797979;
				margin-top: 20rpx;
			}
		}
	}
	.nothing {
		text-align: center;
		font-size: 24rpx;
		color: #999;
		padding-bottom: 28rpx;
	}
}
</style>